<template>
  <div class="container">
    <el-form label-width="200px">
      <el-tabs>
        <el-tab-pane label="企业微信">
          <el-form-item label="企业corpID">
            <el-input v-model="formData.corp_id" class="max-w-[400px]" placeholder="请输入企业corpID" />
          </el-form-item>
          <el-form-item label="企业AgentId">
            <el-input v-model="formData.agent_id" class="max-w-[400px]" placeholder="请输入企业AgentId" />
          </el-form-item>
          <el-form-item label="企业Secret">
            <el-input v-model="formData.secret_key" class="max-w-[400px]" placeholder="请输入企业Secret" />
          </el-form-item>
          <el-form-item label="企业token">
            <el-input v-model="formData.token" class="max-w-[400px]" placeholder="请输入企业token" />
          </el-form-item>
          <el-form-item label="企业encodingAesKey">
            <el-input v-model="formData.aes_key" class="max-w-[400px]" placeholder="请输入企业encodingAesKey" />
          </el-form-item>
          <el-form-item label="通讯录回调地址">
            <el-input v-model="formData.contact_url" type="textarea" class="max-w-[400px]" placeholder="请输入通讯录回调地址" disabled />
          </el-form-item>
          <el-form-item label="企业消息回调地址">
            <div>
              <el-input v-model="formData.notify_url" type="textarea" class="min-w-[400px]" placeholder="请输入企业消息回调地址" disabled />
              <div class="text-[#999]">请配置到企业微信后台回调中。</div>
            </div>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getWechatConfigApi, saveWechatConfigApi } from '../../api/system'
import { IWechatConfig } from '../../types'
import { cloneDeep } from 'lodash-es'
import { ElMessage } from 'element-plus'
import { t } from '@/lang'

const defaultFormData: IWechatConfig = {
    corp_id: '',
    agent_id: '',
    secret_key: '',
    token: '',
    aes_key: '',
    notify_url: '',
    contact_url: ''
}
const formData = ref<IWechatConfig>({ ...cloneDeep(defaultFormData) })

async function getWechatConfig () {
    const res = await getWechatConfigApi()
    formData.value = res.data as IWechatConfig
}

async function submit () {
    await saveWechatConfigApi(formData.value)
    ElMessage.success(t('save.success'))
}

onMounted(() => {
    getWechatConfig()
})
</script>

<style lang="scss" scoped>
.container {
  background-color:  var(--el-bg-color);
  padding: 20px;
}
.footer {
  position: sticky;
  bottom: 0;
  margin-top: 20px;
  display: flex;
  padding: 15px;
  justify-content: center;
  background-color: var(--el-bg-color);
}
</style>
